<template>
  <div
    ref="tableContainer"
    style="width: calc(100vw - 200px); height: 100vh"
  ></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import dataJson from "../json/tree.json";    
import * as VTable from "@visactor/vtable";

const tableContainer = ref(null);

const columns = [
  {
    field: "group",
    title: "department",
    width: "auto",
    tree: true,
    fieldFormat(rec) {
      return rec["department"] ?? rec["group"] ?? rec["name"];
    },
  },
  {
    field: "total_children",
    title: "memebers count",
    width: "auto",
    fieldFormat(rec) {
      if (rec?.["position"]) {
        return `position:  ${rec["position"]}`;
      } else return rec?.["total_children"];
    },
  },
  {
    field: "monthly_expense",
    title: "monthly expense",
    width: "auto",
    fieldFormat(rec) {
      if (rec?.["salary"]) {
        return `salary:  ${rec["salary"]}`;
      } else return rec?.["monthly_expense"];
    },
  },
  {
    field: "new_hires_this_month",
    title: "new hires this month",
    width: "auto",
  },
  {
    field: "resignations_this_month",
    title: "resignations this month",
    width: "auto",
  },
  {
    field: "complaints_and_suggestions",
    title: "recived complaints counts",
    width: "auto",
  },
];

const option = ref({
  container: tableContainer.value,
  records: dataJson,
  columns,
  widthMode: "standard",
});

onMounted(() => {
  option.value.container = tableContainer.value;
  const tableInstance = new VTable.ListTable(option.value);
});

</script>

